<template>
  <Card>
    <Row style="margin-bottom:16px;">
      <Col span="6">
      <Input v-model="value" placeholder="报警模块/报警区域/设备"></Input>
      </Col>
      <Col span="6">
      <DatePicker :value="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
      <Button type="primary" shape="circle" icon="ios-search"></Button>
      </Col>
    </Row>
    <div>
      <Table border :columns="columns7" :data="data6"></Table>
      <Row style="text-align:right;padding:10px 0;">
        <Page :total="40" size="small" show-elevator show-sizer></Page>
      </Row>
    </div>
  </Card>
</template>
<script>
export default {
  data: function () {
    return {
      value: '',
      value2: ['2016-01-01', '2016-02-15'],
      columns7: [{
        type: 'index',
        width: 60,
        align: 'center'
      }, {
        title: '报警模块',
        key: 'model1',
        align: 'center'
        /* ,
                  render: (h, params) => {
                    return h('div', [
                      h('Icon', {
                        props: {
                          type: 'person'
                        }
                      }),
                      h('strong', params.row.type)
                    ])
                  } */
      }, {
        title: '报警模块2',
        key: 'model2',
        align: 'center'
      }, {
        title: '设备',
        key: 'device',
        align: 'center'
      }, {
        title: '报警区域',
        key: 'area',
        align: 'center'
      }, {
        title: '报警数据',
        key: 'data',
        align: 'center'
      }, {
        title: '报警类型',
        key: 'type',
        align: 'center'
      }, {
        title: '报警时间',
        key: 'start',
        align: 'center'
      }, {
        title: '结束时间',
        key: 'end',
        align: 'center'
      }, {
        title: '操作',
        key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.show(params.index)
                }
              }
            }, '查看详情')
            /* ,
                          h('Button', {
                            props: {
                              type: 'error',
                              size: 'small'
                            },
                            on: {
                              click: () => {
                                let self = this
                                let config = {
                                  title: '提示',
                                  content: '您确定删除吗？',
                                  onOk: function () {
                                    self.remove(params.index)
                                  }
                                }
                                this.$Modal.confirm(config)
                              }
                            }
                          }, '删除') */
          ])
        }
      }],
      data6: [{
        model1: '环境安全',
        model2: '入侵',
        device: '总装1号红外线传感器',
        area: '总装车间xxx',
        data: '无',
        type: '红外线阻断',
        start: '2018-03-26 14:28:26',
        end: '2018-03-26 14:28:55'
      }, {
        model1: '环境安全',
        model2: '入侵',
        device: '总装2号红外线传感器',
        area: '总装车间xxx',
        data: '无',
        type: '红外线阻断',
        start: '2018-03-26 14:28:26',
        end: '2018-03-26 14:28:55'
      }, {
        model1: '环境安全',
        model2: '入侵',
        device: '总装3号红外线传感器',
        area: '总装车间xxx',
        data: '无',
        type: '红外线阻断',
        start: '2018-03-26 14:28:26',
        end: '2018-03-26 14:28:55'
      }, {
        model1: '环境安全',
        model2: '入侵',
        device: '总装4号红外线传感器',
        area: '总装车间xxx',
        data: '无',
        type: '红外线阻断',
        start: '2018-03-26 14:28:26',
        end: '2018-03-26 14:28:55'
      }]
    }
  },
  methods: {
    show: function (index) {
      this.$Modal.info({
        title: '信息',
        content: `设备：${this.data6[index].device}<br>类型：${this.data6[index].type}<br>开始时间：${this.data6[index].start}`
      })
    },
    remove: function (index) {
      this.data6.splice(index, 1)
    }
  }
}

</script>
